.top_box {
    width: 100%;
    height: 30vh;
    background-color: #779BA7;
    overflow: hidden;

    .mine {
        margin: 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #fff;
        border-radius: 16rpx;
        width: 440rpx;
        height: 240rpx;

        // background-color: pink;
        .headSculpture {
            display: flex;
            flex: 1;
            padding: 30rpx;
        }

        .headSculpture open-data {
            overflow: hidden;
            border-radius: 50%;
        }

        .info {
            display: flex; 
            flex: 1;
            flex-direction: column;
            padding: 20rpx;

            .name {
                font-size: 48rpx;
                font-weight: bold;
                color: #fff;
            }

            .classCount {
                display: inline;
                margin-top: 30rpx;
                font-size: 28rpx;
                color: #fff;

                text {
                    display: inline;
                }
            }
        }
    }
}

.bottom_box {
    height: 70vh;
    background-color: #fff;

    .list {
        .listContent {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin: 30rpx 0;

            .Feedback,
            .instructions,
            .aboutUs {
                display: flex;
                align-items: center;
                width: 640rpx;
                height: 100rpx;
                font-size: 30rpx;
                border-bottom: 1px solid #ccc;
            }
        }
    }

    .btn {
        position: absolute;
        bottom: 40rpx;
        left: 30rpx;

        button {
            background-color: #eb4450;
            color: #fff;
            font-size: 28rpx;
        }
    }
}